<!--
 * @FileDescription 故障点设置菜单
 * @Author lz
 * @Date 20230606 13:03:43
 * @LastEditors lz
 * @LastEditTime 20230606 13:03:43
-->
<template>
  <div class="wp">
    <hdr></hdr>

    <div class="col_l">
      <div class="PromptText" v-if="HomeContent.Default.ModeType.value == 1">
        <img src="/images/ic_教学模式.png" class="pro_img" />
        <span class="pro_txt">开启教学模式</span>
      </div>
      <div class="PromptText" v-if="HomeContent.Default.ModeType.value == 2">
        <img src="/images/ic_训练模式.png" class="pro_img" />
        <span class="pro_txt">开启训练模式</span>
      </div>
      <div class="PromptText" v-if="HomeContent.Default.ModeType.value == 3">
        <img src="/images/ic_考核模式.png" class="pro_img" />
        <span class="pro_txt">开启考核模式</span>
      </div>
      <div class="tit">设置故障点</div>
      <!-- <div class="prompt">最多可设置10个故障点</div> -->
      <img
        src="/images/pic_教学.png"
        class="ico_B"
        v-if="HomeContent.Default.ModeType.value == 1"
      />
      <img
        src="/images/pic_训练.png"
        class="ico_B"
        v-if="HomeContent.Default.ModeType.value == 2"
      />
      <img
        src="/images/pic_考核.png"
        class="ico_B"
        v-if="HomeContent.Default.ModeType.value == 3"
      />
      <div class="ret_btn" @click="returnBtn">
        <img src="/images/Group_black.png" class="ret_ico" />
        <span class="ret_txt">返回</span>
      </div>
    </div>
    <div class="col_r">
      <div class="row_1">
        <div
          class="whole_tab"
          :class="state.current == -1 ? 'current' : ''"
          @click="whole(-1)"
        >
          全部
        </div>
        <!-- 已选故障按钮 -->
        <div
          class="Selected_tab"
          :class="state.current == -100 ? 'current' : ''"
          @click="Selected(-100)"
        >
          已选故障
          <a-badge
            :count="state.newID.length"
            class="a_badge"
            :number-style="{
              backgroundColor: '#9bfb4e',
              color: '#000000',
            }"
          />
        </div>
        <!-- 循环出来的那些按钮 -->
        <!-- <div class="tab_list">
          <a-tabs v-model:activeKey="activeKey" tab-position="top" @change="callback">
            <a-tab-pane
              v-for="(i, index) in HomeContent.Default.FaultPointData.value
                .FaultAppearances"
              :key="index"
              :tab="i"
            >
            </a-tab-pane>
          </a-tabs>
        </div> -->
        <!-- <div class="tab_list">
          <a-tabs
            v-for="(i, index) in pickArr"
            :key="index"
            tab-position="top"
            v-model:activeKey="activeKey"
            @change="callback(index)"
            :class="state.current == index ? 'pick' : ''"
          >
            <a-tab-pane :tab="i.name" :Name="i.name"></a-tab-pane>
            <template #tabBarExtraContent>
              <a-badge
                :count="pickArr[index].number"
                class="a_badge"
                :number-style="{
                  backgroundColor: '#9bfb4e',
                  color: '#000000',
                }"
              />
            </template>
          </a-tabs>
        </div> -->
        <!-- ========================================================================================================== -->
        <div class="tab_list">
          <!-- tab-position="top" -->
          <a-tabs v-model:activeKey="activeKey" @change="callback(activeKey)">
            <a-tab-pane v-for="(i, index) in pickArr" :key="index">
              <template #tab>
                <span>{{ i.name }}</span>
                <!-- 绑定的是当前标签下选中的数组长度 -->
                <a-badge
                  :count="i.number"
                  :number-style="{
                    backgroundColor: '#9bfb4e',
                    color: '#000000',
                  }"
                ></a-badge>
              </template>
            </a-tab-pane>
          </a-tabs>
        </div>
        <!-- ========================================================================================================== -->
        <a-input-search
          style="margin-top: 5px"
          v-model:value="inp_value"
          placeholder="搜索"
          @search="onSearch"
          class="inp_box"
        />
      </div>
      <div class="row_2_box">
        <div class="row_2">
          <a-checkbox
            v-model:checked="i.types"
            v-for="(i, index) in state.tabList"
            :key="index"
            @change="changeCheck(i)"
            >{{ i.Name }}</a-checkbox
          >
        </div>
      </div>

      <div class="row_3">
        <div class="random" @click="random">
          <span>自动组卷</span>
          <!-- <img src="/images/ic_xh.png" class="ico_ran"> -->
        </div>
        <div class="ran_inp">
          <a-input v-model:value="ico_ran_val" placeholder="数量" class="ico_ran_box" />
          <span>个故障</span>
        </div>
        <div class="QuantityText">
          共{{ newArr.length }}个故障点，已选中
          <span class="QuantityNum">{{ state.newID.length }}</span> 个故障点
        </div>
        <!-- <div class="ModeSwitch">
                    <a-switch v-model:checked="HomeContent.Default.WOT.value" @change="switchChange" checked-children="主观" un-checked-children="客观" />
                </div> -->
        <div class="resetting" @click="reset">
          <span>重置</span>
          <img src="/images/ic_cz.png" class="ico_res" />
        </div>

        <div class="clickToEnter" @click="Open">
          <span>点击进入</span>
          <img src="/images/Group.png" class="ico_cli" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import hdr from "../Hdr/index.vue";
import { onMounted, ref, nextTick, reactive } from "vue";
import { useRouter } from "vue-router";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
import { message } from "ant-design-vue";
const rate = ref("RGBA(221, 245, 153, 1)");
const router = useRouter();
const inp_value = ref<string>("");
const ico_ran_val = ref<any>();
const activeKey = ref(-1);
const state = reactive({
  current: -1,
  tabList: <any>[],
  storage: [],
  newID: <any>[],
  checked1: true,
});

let pointName = HomeContent.Default.FaultPointData.value.FaultAppearances;
let pickArr = ref<any>([]);
pointName.forEach((item: any) => {
  let pick = {
    name: item,
    number: "",
  };
  pickArr.value.push(pick);
});

let newArr: any = HomeContent.Default.FaultPointData.value.FaultModels;
newArr.forEach((item: any) => {
  item.types = false;
});

//故障随机
function random() {
  if (ico_ran_val.value < newArr.length + 1) {
    if (!isNaN(parseFloat(ico_ran_val.value)) && isFinite(ico_ran_val.value)) {
      state.newID.length = ico_ran_val.value;
      HomeContent.Default.FaultNumber.value = null;
      pickArr.value.forEach((item: any) => {
        item.number = "";
      });
      const array: number[] = [];
      while (array.length < ico_ran_val.value) {
        //不断产生随机数字
        let ran = Math.floor(Math.random() * newArr.length);
        if (array.find((x) => x === ran) === undefined) {
          array.push(ran);
        }
      }
      newArr.forEach((item: any) => {
        item.types = false;
      });
      array.forEach((item: any) => {
        newArr[item].types = true;
      });
      // 循环遍历所有的项，如果types为true，根据Modeule来让其+1
      newArr.forEach((item: any) => {
        if (item.types) {
          upDownCounter(item);
        }
      });
      changeCheck(sessionStorage.getItem("currentIndex"));
    }
  } else {
    message.error("请在下方输入正确的故障数量！");
  }
}
async function returnBtn() {
  HomeContent.Default.currentPoint.value = "0";
  //重置
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.SYSTEM_QUIT
    )
  );
  //卸载
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.EmbeddedApplicationShutdownRequest()
  );

  router.push("/");
}
function reset() {
  inp_value.value = "";
  ico_ran_val.value = "";
  state.current = -1;
  activeKey.value = -1;
  state.tabList = newArr;
  state.newID = [];
  newArr.forEach((item: any) => {
    item.types = false;
  });
  pickArr.value.forEach((item: any) => {
    item.number = "";
  });
}
//开关监听
function switchChange(val: any) {
  console.log(val);
  if (val == true) {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_ORDER_SET_MODE,
        `0`
      )
    );
  } else if (val == false) {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_ORDER_SET_MODE,
        `1`
      )
    );
  }
}

//模糊搜索
function onSearch() {
  let data = [];
  for (let i = 0; i < state.tabList.length; i++) {
    if (state.tabList[i].Name.indexOf(inp_value.value) != -1) {
      data.push(state.tabList[i]);
    }
  }
  state.tabList = [];
  data.forEach((item) => {
    state.tabList.push(item);
  });
}
function whole(val: number) {
  state.current = val;
  activeKey.value = val;
  state.tabList = newArr;
}

function callback(val: any) {
  state.tabList = [];
  state.current = val;
  sessionStorage.setItem("currentIndex", val);
  let newType: any = pickArr.value[val].name;
  sessionStorage.setItem("currentName", newType);
  newArr.forEach((item: any) => {
    if (item.Module == newType) {
      state.tabList.push(item);
    }
  });

  // let newType: any = HomeContent.Default.FaultPointData.value.FaultAppearances[val];
  // console.log(newType);
  // newArr.forEach((item: any) => {
  //   if (item.Module == newType) {
  //     state.tabList.push(item);
  //   }
  // });
}
// 在全部栏里点击任意可以+—
function upDownCounter(i: any) {
  pickArr.value.forEach((item: { name: any; number: number }) => {
    if (i.Module == item.name) {
      if (i.types) {
        item.number++;
      } else {
        item.number--;
      }
    }
  });
}
function changeCheck(i: any) {
  if (activeKey.value == -100 && i.types == false) {
    state.tabList = [];
    newArr.forEach((item: any) => {
      if (item.types == true) {
        state.tabList.push(item);
      }
    });
  }
  upDownCounter(i);
  state.newID = [];
  let pickList: any[] = [];
  newArr.forEach((item: any) => {
    if (item.types) {
      state.newID.push(item.Id);
      HomeContent.Default.FaultNumber.value = state.newID.length;
      //@ts-ignore
      if (item.Module == sessionStorage.getItem("currentName")) {
        pickList.push(item.Id);
        //@ts-ignore
        pickArr.value[sessionStorage.getItem("currentIndex")].number = pickList.length;
      }
    }
  });
}
function Selected(val: any) {
  state.tabList = [];
  state.current = val;
  activeKey.value = val;
  newArr.forEach((item: any) => {
    if (item.types == true) {
      state.tabList.push(item);
    }
  });
}

//补零
function complZero(n: any) {
  return n < 10 ? "0" + n : "" + n;
}
// 计时
let second = 0;
let minute = 0;
let hour = 0;
function start() {
  HomeContent.Default.timekeepingControl.value = setInterval(() => {
    second += 1;
    if (second >= 60) {
      second = 0;
      minute = minute + 1;
    }
    if (minute >= 60) {
      minute = 0;
      hour = hour + 1;
    }
    HomeContent.Default.time.value =
      complZero(hour) + ":" + complZero(minute) + ":" + complZero(second);
    HomeContent.Default.timeShow.value =
      Number(hour * 3600) + Number(minute * 60) + Number(second);
  }, 1000);
}

async function Open() {
  if (state.newID.length > 0) {
    await WebSocketComponent.Default.PostMessageAsync(
      new ClientMessage.DiagnosisAdapterRequest(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_SET,
        state.newID.toString()
      )
    );
    start();
  } else {
    message.warning("请选择故障点");
    return;
  }
  router.push("WindowPage");
}
onMounted(() => {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_ORDER_SET_MODE,
      `0`
    )
  );
  state.tabList = newArr;
  if (HomeContent.Default.ModeType.value == 1) {
    rate.value = "RGBA(221, 245, 153, 1)";
  } else if (HomeContent.Default.ModeType.value == 2) {
    rate.value = "RGBA(207, 172, 250, 1)";
  } else if (HomeContent.Default.ModeType.value == 3) {
    rate.value = "RGBA(195, 208, 255, 1)";
  }
});
</script>

<style scoped>
.wp {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  color: #fff;
  background: transparent;
  overflow: hidden;
}

.col_l {
  width: 620px;
  height: 95vh;
  position: absolute;
  left: 0;
  background-color: v-bind(rate);
}

.col_r {
  width: 1320px;
  height: 95vh;
  position: absolute;
  right: 0;
  background-color: #fff;
  border-radius: 24px 0px 0px 24px;
}

.PromptText {
  line-height: 60px;
  position: absolute;
  left: 60px;
  top: 60px;
}

.pro_img {
  width: 60px;
  height: 60px;
  margin-top: -10px;
}

.pro_txt {
  font-size: 24px;
  font-weight: 400;
  line-height: 60px;
  color: #000000;
  padding-left: 20px;
}

.tit {
  font-size: 64px;
  font-weight: 600;
  color: #000000;
  position: absolute;
  left: 60px;
  top: 221px;
}

.prompt {
  font-size: 20px;
  font-weight: 400;
  color: #202020;
  line-height: 23px;
  position: absolute;
  left: 60px;
  top: 337px;
}

.ico_B {
  width: 520px;
  position: absolute;
  bottom: 152px;
  left: 40px;
}

.ret_btn {
  width: 128px;
  height: 52px;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 40px;
  bottom: 60px;
}

.ret_txt {
  font-size: 20px;
  font-weight: 500;
  color: #202020;
  line-height: 48px;
}

.ret_ico {
  width: 28px;
  margin-top: -9px;
  margin-right: 12px;
  margin-left: 24px;
}

.row_1 {
  width: 100%;
  height: 100px;
}

.row_2_box {
  width: 1240px;
  height: 70vh;
  background: #ffffff;
  opacity: 1;
  border: 1px solid #e1e3e8;
  margin: 0 auto;
  border-radius: 12px;
}

.row_2 {
  width: 99%;
  height: 99%;
  overflow-y: auto;
  padding-top: 6px;
  margin-top: 0.5%;
}

.random {
  width: 128px;
  height: 52px;
  background: #9bfb4e;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  line-height: 50px;
  font-size: 20px;
  font-weight: 500;
  color: #202020;
  /* padding-left: 24px; */
  text-align: center;
  position: absolute;
  bottom: 60px;
  left: 40px;
}

.ico_cli,
.ico_ran,
.ico_res {
  width: 28px;
  margin-top: -4px;
  margin-left: 12px;
}

.ModeSwitch {
  position: absolute;
  right: 380px;
  bottom: 74px;
}

.resetting {
  width: 120px;
  height: 52px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #e9e9e9;
  color: #000;
  font-size: 20px;
  font-weight: 500;
  padding-left: 24px;
  line-height: 50px;
  position: absolute;
  right: 232px;
  bottom: 60px;
}

.clickToEnter {
  width: 168px;
  height: 52px;
  background: #000000;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  line-height: 50px;
  font-size: 20px;
  font-weight: 500;
  padding-left: 24px;
  color: #ffffff;
  position: absolute;
  right: 40px;
  bottom: 60px;
}

.inp_box {
  position: absolute;
  right: 40px;
  top: 34px;
  width: 272px;
}

:deep().ant-input {
  height: 40px;
}

.whole_tab {
  width: 64px;
  height: 48px;
  line-height: 44px;
  text-align: center;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #f0f0f0;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  position: absolute;
  left: 40px;
  top: 34px;
}

.Selected_tab {
  width: 100px;
  height: 48px;
  line-height: 44px;
  text-align: center;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #f0f0f0;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  position: absolute;
  left: 120px;
  top: 34px;
}

.current {
  background: linear-gradient(
    90deg,
    #9bfb4e 0%,
    rgba(155, 251, 78, 0.75) 58%,
    rgba(155, 251, 78, 0) 100%
  );
  line-height: 46px;
  border: none;
}

.tab_list {
  /* max-width: 760px; */
  max-width: 740px;
  height: 55px;
  position: absolute;
  left: 219px;
  top: 34px;
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  margin-left: 22px;
}

.tab_list::-webkit-scrollbar {
  /*滚动条整体样式*/
  /* width: 6px; */
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}

.tab_list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;
  background: #dfe1e8;
}

.tab_list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  border-radius: 10px;
  background: #f8f8f8;
}

:deep().ant-tabs {
  /* margin-left: 24px !important; */
  margin-right: 24px !important;
  /* line-height: 27px !important; */
}
.ant-tabs:last-child {
  margin-right: 0px !important;
}
.a_badge {
  position: absolute;
  top: 0px;
  right: -9px;
}
:deep().ant-tabs-ink-bar {
  display: none !important;
}

:deep().ant-tabs-top > .ant-tabs-nav::before {
  display: none !important;
}

:deep().ant-tabs-tab {
  color: #1a1a1a !important;
  font-weight: 400;
  font-size: 16px !important;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #f0f0f0;
  padding: 10.5px 16px !important;
}

:deep().ant-tabs-tab-active {
  color: #1a1a1a !important;
  font-size: 16px !important;
  font-weight: 400;
  background: linear-gradient(
    90deg,
    #9bfb4e 0%,
    rgba(155, 251, 78, 0.75) 58%,
    rgba(155, 251, 78, 0) 100%
  );
  padding: 10.5px 17px !important;
  border: none;
}

:deep().ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #1a1a1a !important;
  font-size: 16px !important;
  font-weight: 400;
}

.row_2::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.row_2::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;
  background: #dfe1e8;
}

.row_2::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  border-radius: 10px;
  background: #f8f8f8;
}

:deep().ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin: 0 !important;
}

:deep().ant-checkbox-wrapper {
  width: 48%;
  padding: 10px 12px;
}

:deep().ant-btn {
  width: 40px;
  height: 40px;
}

.QuantityText {
  font-size: 16px;
  font-weight: 500;
  color: #a6a6a6;
  position: absolute;
  left: 332px;
  bottom: 72px;
}

.QuantityNum {
  color: #000;
}

.ran_inp {
  width: 150px;
  font-size: 16px;
  font-weight: 500;
  color: #202020;
  position: absolute;
  bottom: 64px;
  left: 192px;
}

.ico_ran_box {
  width: 60px;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
}

:deep().ant-switch {
  background: #1890ff !important;
}
.ant-badge {
  position: absolute;
  top: 0;
  right: -1px;
}
</style>
